<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目评审人员注册</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        body {
            background-color: #f5f5f5;
        }
        .form-container {
            background-color: #fff;
            border-radius: 5px;
            padding: 20px;
            margin: 20px auto;
            max-width: 800px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .form-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .basic-info {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .required-field::before {
            content: "* ";
            color: red;
        }
        .form-footer {
            text-align: right;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        .btn-submit {
            background-color: #6c5ce7;
            border-color: #6c5ce7;
            color: white;
            width: 120px;
        }
        .btn-cancel {
            background-color: #e0e0e0;
            border-color: #e0e0e0;
            color: #333;
            width: 120px;
            margin-right: 10px;
        }
        .input-with-unit {
            position: relative;
        }
        .unit-label {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-container">
            <div class="form-header">
                <h3>项目评审人员注册</h3>
            </div>

            <form id="registerForm">
                <div class="basic-info">
                    <h5>基本信息:</h5>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="required-field">姓名:</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="phone" class="required-field">联系电话:</label>
                            <input type="text" class="form-control" id="phone" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="email" class="required-field">联系邮箱:</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="password" class="required-field">登录密码:</label>
                            <input type="password" class="form-control" id="password" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="title">职务职称:</label>
                            <input type="text" class="form-control" id="title">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="reviewFee">评审费:</label>
                            <div class="input-with-unit">
                                <input type="number" class="form-control" id="reviewFee">
                                <div class="unit-label">元</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="bankName" class="required-field">银行名称:</label>
                            <input type="text" class="form-control" id="bankName" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="bankAccount" class="required-field">银行卡号:</label>
                            <input type="text" class="form-control" id="bankAccount" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="organization" class="required-field">单位名称:</label>
                            <input type="text" class="form-control" id="organization" required>
                        </div>
                    </div>
                </div>

                <div class="form-footer">
                    <button type="button" class="btn btn-cancel" id="cancelBtn">取消</button>
                    <button type="submit" class="btn btn-submit" id="submitBtn">提交</button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 从URL获取邀请码参数
            function getInviteCode() {
                const urlParams = new URLSearchParams(window.location.search);
                return urlParams.get('code');
            }
            
            // 验证表单
            function validateForm() {
                let isValid = true;
                $("#registerForm input[required]").each(function() {
                    if ($(this).val().trim() === "") {
                        isValid = false;
                        $(this).addClass('is-invalid');
                    } else {
                        $(this).removeClass('is-invalid');
                    }
                });
                return isValid;
            }
            
            // 提交按钮点击事件
            $("#registerForm").on('submit', function(e) {
                e.preventDefault();
                
                // 验证表单
                if (!validateForm()) {
                    alert("请填写所有必填项");
                    return;
                }
                
                // 获取表单数据
                const formData = {
                    name: $("#name").val(),
                    phone: $("#phone").val(),
                    email: $("#email").val(),
                    password: $("#password").val(),
                    title: $("#title").val(),
                    reviewFee: $("#reviewFee").val(),
                    bankName: $("#bankName").val(),
                    bankAccount: $("#bankAccount").val(),
                    organization: $("#organization").val(),
                    inviteCode: getInviteCode()
                };
                
                // 在实际应用中，这里应该发送AJAX请求到服务器
                console.log("提交的表单数据:", formData);
                
                // 模拟提交成功
                alert("注册成功！");
                window.location.href = "../reviewer-management.html";
            });
            
            // 取消按钮点击事件
            $("#cancelBtn").click(function() {
                if (confirm("确定要取消注册吗？所有填写的信息将不会保存。")) {
                    window.location.href = "../reviewer-management.html";
                }
            });
        });
    </script>
</body>
</html>
